// 绘制印章边框
const renderBorder = ({
  context,
  width,
  height,
  lineWidth = 4,
  color
}: any) => {
  if (!context) {
    return
  }
  context.lineWidth = lineWidth
  context.strokeStyle = color
  context.beginPath()
  context.arc(width, height, 77, 0, Math.PI * 2) // 宽、高、半径(半径用来跳转外圈的大小)
  context.stroke()
}

// 绘制底部文字
const renderBottomText = ({ context, x, y, text, color }: any) => {
  if (!context) {
    return
  }
  context.font = '400 12px 宋体'
  context.textBaseline = 'middle' // 设置文本的垂直对齐方式
  context.textAlign = 'center' // 设置文本的水平对对齐方式
  context.fontWeight = 400
  context.lineWidth = 1
  context.strokeStyle = color
  context.strokeText(text, x, y)
}

// 绘制单位名称
const renderCompanyName = ({
  context,
  translateX,
  translateY,
  text,
  color
}: any) => {
  if (!context) {
    return
  }
  context.translate(translateX, translateY) // 平移到此位置,
  context.font = '400 16px 宋体'
  context.textBaseline = 'middle' // 设置文本的垂直对齐方式
  context.textAlign = 'center' // 设置文本的水平对对齐方式
  context.fontWeight = 400
  context.lineWidth = 1
  context.strokeStyle = color
  const count = text.length // 字数
  const angle = (4 * Math.PI) / (3 * (count - 1)) // 字间角度
  const chars = text.split('')
  let c
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < count; i++) {
    c = chars[i] // 需要绘制的字符
    if (i === 0) {
      context.rotate((5 * Math.PI) / 6)
    } else {
      context.rotate(angle)
    }
    context.save()
    context.translate(56, 0) // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
    context.rotate(Math.PI / 2) // 旋转90度,让字平行于x轴
    context.strokeText(c, 0, 0) // 此点为字的中心点
    context.restore()
  }
}

// 绘制五角星
const render5star = ({ context, sx, sy, radius, color, rotate }: any) => {
  if (!context) {
    return
  }
  context.save()
  context.fillStyle = color
  context.translate(sx, sy) // 移动坐标原点
  context.rotate(Math.PI + rotate) // 旋转
  context.beginPath() // 创建路径
  const dig = (Math.PI / 5) * 4
  for (let i = 0; i < 5; i++) {
    // 画五角星的五条边
    const x = Math.sin(i * dig)
    const y = Math.cos(i * dig)
    context.lineTo(x * radius, y * radius)
  }
  context.closePath()
  context.stroke()
  context.fill()
  context.restore()
}

// 绘制
export default ({
  canvas,
  context,
  companyName,
  bottomText,
  showStar = true,
  color = '#ff0000'
}: any) => {
  const width = canvas.width / 2
  const height = canvas.height / 2

  // 绘制印章边框
  renderBorder({
    context,
    width,
    height,
    color
  })

  if (showStar) {
    // 绘制五角星
    render5star({
      context,
      sx: width,
      sy: height,
      radius: 18,
      color,
      rotate: 0
    })
  }

  // 绘制底部文字
  if (bottomText) {
    renderBottomText({
      context,
      x: width,
      y: height + 48,
      text: bottomText,
      color
    })
  }

  // 绘制印章单位
  if (companyName) {
    renderCompanyName({
      context,
      translateX: width,
      translateY: height,
      text: companyName,
      color
    })
  }
}
